<template>
	<view class="search_box">
		<view class="goods_box">
		<!-- 	<template v-for="i in 10"> -->
				<view v-for="goodsItem in goods" @click="toList(goodsItem.id)" class="goodsItem">
					<view class="img" :style="{backgroundImage:`url(${goodsItem.goods_thumb_img})`}"></view>
					<view class="title">{{goodsItem.goods_name}}</view>
				</view>
		<!-- 	</template> -->
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app"
	import {
		getGoodsList
	} from "@/api/index.js"
	const count = ref(0)
	const params = ref({})
	onLoad((option) => {
		uni.setNavigationBarTitle({
			title: option.title, // 新标题
		});
		option.page = 1
		option.limit = 10
		params.value = option
		console.log(option, 34)
		getList()
	})
	const goods = ref([])
	function getList() {
		getGoodsList(params.value).then(e => {
			goods.value = [...goods.value, ...e.data.list]//.concat(e.data.list)
			count.value = e.data.count
		})
	}

	function toList(id) {
		uni.navigateTo({
			url: '/chanPin/pages/xiLieXiangQing?id=' + id
		});
	}
	// 获取商品列表 判断是根据分类 
	
	let timer = null
	onReachBottom(() => {
		console.log("走了")
		clearTimeout(timer)
		timer = setTimeout(() => {
			if (count.value > goods.value.length) {
				params.value.page++
				getList()
			}
		}, 2000)
	})
</script>

<style>
	.search_box {
		width: 100%;
		background-color: #f7f7f7;
	}

	.goods_box {
		padding-top: 20rpx;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20rpx;
		margin: 0 20rpx;
		padding-bottom: 50rpx;

	}

	.img {
		height: 260rpx;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	}

	.goodList {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10rpx;
	}

	.goodsItem {
		background-color: #fff;
		border-radius: 10rpx;
		text-align: center;
		font-size: 24rpx;
		min-height: 300rpx;
		display: flex;
		flex-direction: column;
		padding: 10rpx;	
	}
	.title{
		display: flex;
		justify-content: center;
		align-items: center;
		flex:1;
		min-height: 60rpx;
	}
</style>